<script setup lang="ts">
import { ref } from 'vue'
import { shuffleArray } from '@/utils'
import GlassBlock from '@/components/glass-block.vue'

// const match1 = [
//   2, 2.2, 3, 4, 5, 5.3, 5.6, 5.9, 6, 6.7, 7, 7.7, 8, 9, 9.5, 10, 11, 12, 13, 14,
//   15, 16, 22, 27, 30,
// ]
// const match2 = [
//   50, 45, 33.3, 25, 20, 19, 18, 17, 16.7, 15, 14.3, 13, 12.5, 11.1, 10.5, 10,
//   9.1, 8.3, 7.7, 7.1, 6.7, 6.25, 4.5, 3.7, 3.3,
// ]

const match1 = [
  5.5, 6, 6.5, 7, 7.5, 8, 8.5, 8.7, 9, 9.5, 11, 12, 13, 14, 15, 16, 17, 18, 19,
  22, 27, 35, 37, 45,
]
const match2 = [
  18.2, 16.7, 15.5, 14.3, 13.3, 12.5, 11.8, 11.5, 11.1, 10.5, 9.1, 8.3, 7.7,
  7.14, 6.7, 6.25, 5.9, 5.6, 5.3, 4.55, 3.7, 2.86, 2.7, 2.22,
]

// const match1 = [
//   1.1, 1.2, 1.3, 1.4, 1.5, 2, 3, 3.5, 4, 4.5, 5, 5.5, 6, 7, 7.5, 8.5, 9, 10,
//   10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 18, 19,
//   22, 27, 30, 45,
// ]
// const match2 = [
//   91, 83, 77, 71.4, 66.7, 50, 33.3, 28.6, 25, 22.2, 20, 18.2, 16.7, 14.3, 13.3,
//   11.8, 11.1, 10, 9.5, 9.1, 8.7, 8.3, 8, 7.7, 7.4, 7.14, 6.9, 6.7, 6.5, 6.25,
//   6.06, 5.9, 5.6, 5.3, 4.55, 3.7, 3.33, 2.22,
// ]

let numbers: string[] = []
for (let i = 0; i < 5; i++) {
  let j = Math.floor(Math.random() * match1.length)
  while (numbers.indexOf(`${match1[j]}`) !== -1) {
    j = Math.floor(Math.random() * match1.length)
  }
  numbers.push(`${match1[j]}`, `${match2[j]}`)
}

shuffleArray(numbers)

const showNums = ref(numbers.slice(0, 9))
const hiddenNums = ref(numbers.slice(9))

const selected: HTMLInputElement[] = []
const result = ref(0)
const selectChange = (e: Event) => {
  const dom = e!.target as HTMLInputElement
  if (dom.checked) {
    selected.push(dom)
  } else {
    selected.splice(selected.indexOf(dom), 1)
  }

  switch (selected.length) {
    case 1:
      result.value = parseFloat(selected[0].value)
      break

    case 0:
      result.value = 0
      break
  }

  if (selected.length === 3) {
    selected[0].checked = false
    selected.splice(0, 1)
  }
  if (selected.length === 2) {
    const src = selected[0]
    const dst = selected[1]

    result.value = parseFloat(src.value) * parseFloat(dst.value)
    if (99.5 < result.value && result.value < 100.9) {
      // if (99 < result.value && result.value < 101) {
      selected.length = 0

      src.classList.add('success')
      dst.classList.add('success')

      setTimeout(() => {
        src.classList.remove('success')
        dst.classList.remove('success')

        src.checked = false
        dst.checked = false

        result.value = 0

        const k = Math.floor(Math.random() * match1.length)
        hiddenNums.value.push(`${match1[k]}`)
        hiddenNums.value.push(`${match2[k]}`)
        shuffleArray(hiddenNums.value)

        showNums.value[parseInt(src.id)] = hiddenNums.value.shift() as string
        showNums.value[parseInt(dst.id)] = hiddenNums.value.shift() as string
      }, 200)
    }
  }
}
</script>

<template>
  <div class="background">
    <GlassBlock class="top">
      {{ result.toFixed(2) }}
    </GlassBlock>
    <div class="container">
      <label v-for="(v, i) in showNums" :key="i" :for="`${i}`">
        <input
          class="blockcheck"
          type="checkbox"
          :id="`${i}`"
          :value="v"
          @click="selectChange"
        />
        <div class="block">{{ v }}</div>
      </label>
    </div>
  </div>
</template>

<style scoped>
.background {
  display: grid;
  position: inherit;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 90vh;
  background-color: #f9f9f9;
}

.top {
  font-size: 2rem;
  line-height: 10vh;
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  align-content: center;
}

.container {
  width: 60vh;
  height: 60vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vh;
}

.block {
  width: 100%;
  height: 100%;
  border-radius: 10%;
  box-shadow:
    12px 12px 12px rgba(0, 0, 0, 0.1),
    -10px -10px 10px white;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2rem;
  align-content: center;
  text-align: center;
  user-select: none;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.block::before {
  content: '';
  width: 25%;
  height: 25%;
  color: #67c23a;
  border-radius: 50%;
}

.blockcheck {
  display: none;
}

.blockcheck:checked + .block {
  color: #41c1fb;
  text-shadow: 0 0 30px #41c1fb;
  transform: scale(0.85);
  transition: all 0.5s;
}

.blockcheck.success:checked + .block {
  color: #67c23a;
  text-shadow: 0 0 30px #67c23a;
  transform: scale(1);
  transition: all 0.2s;
}

@media screen and (max-width: 768px) {
  .background {
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    background-color: #f9f9f9;
  }

  .container {
    max-width: 60vw;
    max-height: 60vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
  }

  .block {
    box-shadow:
      4px 4px 4px rgba(0, 0, 0, 0.1),
      -4px -4px 4px white;
  }

  .top,
  .block {
    font-family: 'Georgia', Times, 'Times New Roman', serif;
  }
}

@media screen and (max-width: 480px) {
  .top {
    min-width: 30vw;
  }
  .container {
    max-width: 75vw;
    max-height: 75vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
  }
  .block {
    box-shadow:
      6px 6px 12px #c5c5c5,
      -6px -6px 12px #ffffff;
  }
}
</style>
